<template>
  <custom-window :title="title">
    <div class="content">
      <div class="echart" id="chart3"></div>
    </div>
  </custom-window>
</template>

<script>
import CustomWindow from '@/components/CustomWindow'
import minxin from '@/utils/mixin'
export default {
  mixins: [minxin],
  name: 'CardItem3',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    CustomWindow
  },
  data () {
    return {}
  },
  computed: {
  },
  watch: {
  },
  created () {
  },
  mounted () {
    this.getData().then(() => {
      this.initTimer()
    })
  },
  beforeDestroy () {
    clearInterval(this._timer)
  },
  methods: {
    initTimer () {
      this._timer = setInterval(this.getData, 60 * 60 * 1000)
    },
    getData () {
      return this.$axios.get(this.$apis.screen.selectYgInfoTypeList).then(res => {
        console.log('res: ', res)
        if (res) {
          this.initChart(res)
        }
      })
    },
    initChart (data) {
      const datas = [
        // { value: 140, name: '花生油' },
        // { value: 380, name: '大豆油' },
        // { value: 532, name: '橄榄油' },
        // { value: 700, name: '花生油2' }

      ]
      if (data.typeName) {
        data.typeName.forEach((item, i) => {
          datas.push({
            value: data.ygWeight[i] - 0,
            name: item
          })
        })
      }

      this.$nextTick(() => {
        const chart = this.$getChartInstance('#chart3')
        const options = {
          legend: {
            top: 'center',
            right: '10%',
            orient: 'vertical',
            textStyle: {
              color: '#fff',
              fontSize: this.$px2vw(14)
            },
            itemHeight: 8,
            itemWidth: 8,
            itemGap: 16,
            borderRadius: '50%',
            formatter: (name) => {
              let total = 0
              for (let i = 0; i < chart.getOption().series.length; i++) {
                for (let j = 0; j < chart.getOption().series[i].data.length; j++) {
                  total += chart.getOption().series[i].data[j].value
                }
              }
              let percentage = 0
              for (let i = 0; i < chart.getOption().series.length; i++) {
                for (let j = 0; j < chart.getOption().series[i].data.length; j++) {
                  if (chart.getOption().series[i].data[j].name === name) {
                    percentage = (chart.getOption().series[i].data[j].value / total * 100).toFixed(2)
                    return `${name}：${chart.getOption().series[i].data[j].value}吨 (${percentage}%)`
                  }
                }
              }
              return name
            }

          },
          toolbox: {
            show: false
          },

          tooltip: {
            trigger: 'item',
            formatter: '{b}：{c}吨 ({d}%)',
            backgroundColor: '#0082CF70',
            borderColor: '#2880FF',
            borderWidth: 1,
            textStyle: {
              color: '#fff',
              fontSize: this.$px2vw(14)
            }
          },
          series: [
            {
              name: '储量占比分析',
              type: 'pie',
              radius: ['60%', '90%'],
              center: ['30%', '50%'],
              // roseType: 'area',
              label: { show: false },
              labelLine: { show: false },
              // selectedOffset: 30,
              // selectedMode: true,
              itemStyle: {
                // borderRadius: 8
              },
              data: datas,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }

          ]

        }
        chart.clear()
        chart.setOption(options)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: 100%;

  .echart {
    height: 100%;
  }
}
</style>
